<template>
	<view class="page">
		<view v-if="isLoading == true"><image class="loading" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/loading-1.gif"></image></view>
		<view v-if="isLoading == false">
			<view class="inv-h-w">
				<view :class="['inv-h', Inv == 0 ? 'inv-h-se' : '']" @click="changeTab(0)">全部</view>
				<!-- <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">待付款</view> -->
				<view :class="['inv-h', Inv == 2 ? 'inv-h-se' : '']" @click="changeTab(2)">待发货</view>
				<view :class="['inv-h', Inv == 3 ? 'inv-h-se' : '']" @click="changeTab(3)">待收货</view>
				<view :class="['inv-h', Inv == 4 ? 'inv-h-se' : '']" @click="changeTab(4)">已完成</view>
			</view>
			<!-- 内容 -->
			<view class="swiper-content">
				<view v-if="Inv == Inv" class="content style-default"><goods-order :list="tlist" :types="Inv" class="item"></goods-order></view>
			</view>
		</view>
	</view>
</template>

<script>
import goodsOrder from 'components/goods-order.vue';
export default {
	components: {
		goodsOrder
	},
	data() {
		return {
			Inv: 0,
			list: [], //真正的列表数据
			tlist: [], //处理的页面展示数据
			isLoading: true
		};
	},
	onShow() {
		// 模拟从后台拿到的数据
		// var list = [{
		// 		id: '0',
		// 		name: '好吃的虾好吃的虾好吃的虾好吃的虾好吃的虾',
		// 		price: 10,
		// 		count: 1,
		// 		size: '大份',
		// 		img: 'http://47.92.83.204:8080/zhangying/img/cart/xia1.jpg',
		// 		types: 9
		// 	},
		// 	{
		// 		id: '1',
		// 		name: '很好吃的虾',
		// 		price: 15,
		// 		count: 1,
		// 		size: '大份',
		// 		img: 'http://47.92.83.204:8080/zhangying/img/cart/xia2.jpg',
		// 		types: 1
		// 	},
		// 	{
		// 		id: '2',
		// 		name: '可乐鸡翅',
		// 		price: 12,
		// 		count: 1,
		// 		size: '大份',
		// 		img: 'http://47.92.83.204:8080/zhangying/img/cart/jichi.jpg',
		// 		types: 2
		// 	}, {
		// 		id: '3',
		// 		name: '傻逼火锅',
		// 		price: 30,
		// 		count: 1,
		// 		size: '大份',
		// 		img: 'http://47.92.83.204:8080/zhangying/img/cart/huoguo.jpg',
		// 		types: 4
		// 	}, {
		// 		id: '4',
		// 		name: '傻逼火锅',
		// 		price: 30,
		// 		count: 1,
		// 		size: '大份',
		// 		img: 'http://47.92.83.204:8080/zhangying/img/cart/huoguo.jpg',
		// 		types: 3
		// 	},
		// 	{
		// 		id: '5',
		// 		name: '可乐鸡翅',
		// 		price: 12,
		// 		count: 1,
		// 		size: '大份',
		// 		img: 'http://47.92.83.204:8080/zhangying/img/cart/jichi.jpg',
		// 		types: 9
		// 	}
		// ]

		// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
		// list.forEach(el => el.isChecked = false);
		// this.list = list;
		// this.tlist = list;//真实数据赋值给页面数据
		let that = this;
		that.ajax(that.url.searchMyOrder, 'POST', { page: 1, length: 20 }, function(resp) {
			that.tlist = resp.data.result;
			that.list = resp.data.result;
		});
	},
	onLoad() {
		let that = this;
		// that.ajax(that.url.searchMyOrder, "POST", {page:1, length:20}, function(resp){
		// 	that.tlist = resp.data.result;
		// 	that.list = resp.data.result;
		// })
		setTimeout(function(resp) {
			that.isLoading = false;
		}, 400);
	},
	methods: {
		changeTab(Inv) {
			var that = this;
			that.Inv = Inv;
			var arr = [];
			that.list.map(item => {
				//遍历真实数据，拿到所需要的数据放在页面数据tlist中，展示在页面上
				if (item.types == Inv) {
					arr.push(item);
				}
			});
			that.tlist = arr;
			if (Inv == 0) {
				//获取全部数据
				that.tlist = that.list;
			}
			//滚动到顶部
			uni.pageScrollTo({
				duration: 0, //过渡时间必须为0，否则运行到手机会报错
				scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
			});
		}
	}
};
</script>

<style lang="scss">
.loading {
	width: 810rpx;
	height: 1512rpx;
}
.page {
	font-family: 'Helvetica Neue', Roboto, 'microsoft yahei' !important;
	background: #f5f5f5;
	font-size: 28upx;
	word-break: break-all;
	word-wrap: break-word;
	color: #1a1a1a;
}
.inv-h-w {
	background-color: #ffffff;
	height: 100upx;
	display: flex;
	position: fixed;
	top: 0;
	width: 100%;
}

.inv-h {
	font-size: 30upx;
	flex: 1;
	text-align: center;
	height: 100upx;
	line-height: 100upx;
}

.inv-h-se {
	color: #ff9014;
	font-weight: bold;
	border-bottom: 6rpx solid #ff9014;
}

.swiper-content {
	margin-top: 110rpx;
	.content {
		width: 670rpx;
		margin: 0 auto 60rpx;
	}
}
.border-top {
	border-top: 1px solid #e5e5e5;
}
</style>
